<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">商品详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="12">
                    商品标题：<span>{{orderInfo.product.productTitle}}</span>
                </el-col>
                <el-col :span="12">
                    车辆信息：<span>{{orderInfo.product.productInfo}}</span>
                </el-col>
                <el-col :span="12">
                    库存（辆）：<span>{{orderInfo.product.stockAmount}}</span>
                </el-col>
                <el-col :span="12">
                    车辆价格：<span>{{orderInfo.product.productPrice}}（{{orderInfo.product.productCurrency}}）</span>
                </el-col>
                <el-col :span="12">
                    起运港：<span>{{orderInfo.harborInfo.harbor}}</span>
                </el-col>
                <el-col :span="12">
                    状态：<span>{{orderInfo.product.status==null ? "": productStatus[orderInfo.product.status].label}}</span>
                </el-col>
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.productDetail.tradeModeList" v-loading="loading">
                        <el-table-column width="" label="可接受成交方式" align="center" prop="code" />
                        <el-table-column width="" label="价格" align="center">
                            <template slot-scope="scope">
                                {{scope.row.price}}{{scope.row.currency == null? "" : "（"+scope.row.currency+"）" }}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="约定付款时间" align="center">
                            <template slot-scope="scope">
                                <span v-for="(item,index) in scope.row.payTimeNodeList" :key="index">{{index == 0 ? item : "/"+item}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>

            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">图片资料</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    缩略图：
                    <div class="imgList mt-lg">
                        <el-image :src="orderInfo.productDetail.prodcutPicList.thumbnailUrl"></el-image>
                    </div>
                </el-col>
                <el-col :span="8">
                    商品图片：
                    <div class="imgList mt-lg">
                        <el-image v-for="(item,index) in orderInfo.productDetail.prodcutPicList.slideshowUrls" :key="index" :src="item"></el-image>
                    </div>
                </el-col>
                <el-col :span="8" v-if="orderInfo.productDetail.video != null">
                    视频：<span></span>
                    <div class="imgList mt-lg">
                        <video :src="orderInfo.productDetail.video" width="40%" height="auto" controls></video>
                    </div>
                </el-col>
            </el-row>

        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">商品详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="12" v-html="orderInfo.productDetail.introduce"></el-col>
            </el-row>

        </c-template>
        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process ref="approvalProcess" :status="orderInfo.product.status" :id="id" @isLoading="changeLoading" :isView="isView"></c-approval-process>
        </c-template>
    </div>
</template>
<script>
import cApprovalProcess from './components/c-approval-process.vue';
import { productStatus } from "@/utils/status.js";
export default {
    components: {
        cApprovalProcess
    },
    data () {
        return {
            loading: false,
            isView: true,
            id: "",
            orderInfo: {
                harborInfo: {},
                product: {},
                productDetail: {
                    prodcutPicList: {
                        slideshowUrls: []
                    }
                }
            },
            productStatus: productStatus
        };
    },
    mounted () {
        this.getInfo()
    },

    methods: {
        changeLoading (loading) {
            this.isView = true
            this.loading = loading
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/product/listing/getById", params })
                this.orderInfo = res

                this.loading = false;

            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 20%;
    }
    video {
        margin: 0 auto;
    }
}
</style>